<template>
  <div>
    <div>
      <el-alert
        style="background-color: #409EFF; color: #222222; font-style: unset; margin-top: 10px; margin-bottom: 20px"
        :closable="false" title="发送邮件"
      />

    </div>
    <div style="width: 480px;float: right;margin-top: 9px">
      <el-card class="box-card" shadow="hover">
        <el-tabs v-model="activeName" @tab-click="checkClick">
          <el-tab-pane label="联系列表" name="first">

            <!--使用子组件contactsMessage -->
            <div>
              <contacts-message @inputMailTo="useChild(arguments)">
              </contacts-message>
            </div>
          </el-tab-pane>
          <el-tab-pane label="已发送邮件" name="second">

            <!--     通过邮箱查找已发送的邮件       -->
            <el-input
              placeholder="请输入内容"
              prefix-icon="el-icon-search"
              v-model="inputEmailTo"
              size="mini"
              style="width: 360px"
              @keyup.enter.native="searchByMailTo"
            />

            <div class="sendSuccessEmail">
              <el-table :data="recentContacts" height="474px" tooltip-effect="dark">
                <el-table-column width="170" property="mailTo" label="收件人" align="center" show-overflow-tooltip
                ></el-table-column>
                <el-table-column width="140" property="mailSubject" label="主题" align="center" show-overflow-tooltip
                ></el-table-column>
                <el-table-column width="150" property="mailText" label="内容" align="center" show-overflow-tooltip
                ></el-table-column>
                <el-table-column width="80" property="accessoryAddressStatu" label="附件信息" align="center"
                                 show-overflow-tooltip
                ></el-table-column>
                <el-table-column width="150" property="createTime" label="发送日期" align="center" show-overflow-tooltip
                ></el-table-column>
                <el-table-column width="90" property="" label="操作" fixed="right" align="center">
                  <template slot-scope="scope">
                    <el-button type="text" size="small" @click="handleClick(scope.row)">查看</el-button>
                    <el-popconfirm title="确定删除该邮件吗？" @confirm="deleteMailClick(scope.row)">
                      <el-button type="text" size="small" slot="reference">删除</el-button>
                    </el-popconfirm>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </el-tab-pane>
        </el-tabs>
        <!--        </div>-->
      </el-card>
    </div>
    <div style="margin-top: 40px;width: 700px;float: left ">
      <el-form ref="form" :model="form" label-width="100px" style="width: 800px" :rules="rules">
        <el-form-item label="收件人" prop="mailTo">
          <el-input v-model="form.mailTo" :disabled="existChild"></el-input>
        </el-form-item>
        <el-form-item label="抄送人" prop="mailCc">
          <el-input v-model="form.mailCc"/>
        </el-form-item>
        <el-form-item label="主题" prop="mailSubject">
          <el-input v-model="form.mailSubject"/>
        </el-form-item>
        <el-form-item label="邮件内容" prop="mailText">
          <el-input type="textarea" v-model="form.mailText" :rows="10" maxlength="255"
                    show-word-limit
          />
        </el-form-item>
        <!--   上传附件到指定后端服务器   -->
        <el-form-item label="附件" prop="mailAddress">
          <el-upload
            class="upload-demo"
            ref="upload"
            action="http://127.0.0.1:8083/emailFile/uploadFile"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :on-success="handleAvatarSuccess"
            :file-list="fileList"
            :auto-upload="true"
          >
            <el-link type="primary" icon="el-icon-document" :underline="false">选取文件</el-link>
          </el-upload>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="sendMail()">发送</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div>
      <el-dialog title="查看详情" :visible.sync="dialogFormVisible" style="height: 800px">
        <el-form ref="form" :model="lookForm" label-width="100px" style="width: 700px" :rules="rules">
          <el-form-item label="收件人" prop="mailTo">
            <el-input v-model="lookForm.mailTo" disabled/>
          </el-form-item>
          <el-form-item label="抄送人" prop="mailCc">
            <el-input v-model="lookForm.mailCc" disabled/>
          </el-form-item>
          <el-form-item label="主题" prop="mailSubject">
            <el-input v-model="lookForm.mailSubject" disabled/>
          </el-form-item>
          <el-form-item label="邮件内容" prop="mailText">
            <el-input type="textarea" v-model="lookForm.mailText" :rows="10" maxlength="255"
                      show-word-limit disabled
            />
          </el-form-item>
          <!--   上传附件到指定后端服务器   -->
          <el-form-item label="附件" prop="mailAddress">
            <el-input v-model="lookForm.mailAddress" disabled/>
          </el-form-item>
        </el-form>
      </el-dialog>
    </div>

    <el-dialog title="邮箱详情" :visible.sync="emailFormVisible" style="height: 800px">
      <!--  输入企业邮箱  -->
      <el-form ref="form" :model="emailContacts" label-width="100px" style="width: 700px" :rules="rules">
        <el-form-item label="邮箱" prop="mailTo">
          <el-input v-model="emailContacts.mailTo"/>
        </el-form-item>
        <el-form-item label="备注" prop="remarkName">
          <el-input v-model="emailContacts.remarkName"/>
        </el-form-item>
        <el-form-item label="描述" prop="description">
          <el-input type="textarea" v-model="emailContacts.description" :rows="5" maxlength="255" show-word-limit/>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="addEmailContacts()">确认</el-button>
          <el-button @click="resetEmailContactsForm()">重置</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>

//引入自组件
import contactsMessage from '../../components/email/emailContacts.vue'

export default {

  name: 'email',

  //定义数据
  data() {
    return {
      dialogFormVisible: false,
      form: {
        id:'',
        mailTo: '',
        mailCc: '',
        mailSubject: '',
        mailText: '',
        mailAddress: ''
      },
      rules: {
        mailTo: [
          { required: true, message: '请输入邮箱地址', trigger: 'blur' },
          { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
        ],
        mailSubject: [
          { required: true, message: '请输入邮件主题', trigger: 'blur' }
        ],
        mailText: [
          { required: true, message: '请输入邮件内容', trigger: 'blur' },
          { min: 0, max: 255, message: '邮件内容不能多于255个字符', trigger: 'blur' }
        ]
      },
      //上传附件
      fileList: [],
      time: {
        start: '',
        end: ''
      },
      recentContacts: [],
      activeName: 'first',

      inputEmailTo: '',
      emailFormVisible: false,
      emailContacts: {
        mailTo: '',
        remarkName: '',
        description: '',
        createTime: ''
      },

      lookForm: {
        mailTo: '',
        mailCc: '',
        mailSubject: '',
        mailText: '',
        mailAddress: ''
      },
      existChild: false

    }
  },
  components: {
    contactsMessage
  },

  mounted() {
    this.loadUser()
    this.queryRecentContacts()
  },
  methods: {
    //删除已发送的邮件
    deleteMailClick(row){
      this.axios.post('/email/deleteEmail/'+row.id).then(res =>{
        if (res.msg=='200'){
          this.$message({
            message: '删除成功',
            type: 'success'
          })
          this.queryRecentContacts()
        }else{
          this.$message({
            message: '删除失败',
            type: 'error'
          })
        }
      })
    },
    //使用子组件中的参数
    async useChild(args) {
      console.log(args[1])
      this.existChild = args[0]
      this.form.mailTo = args[1]
    },
    //查询所有邮箱联系人
    searchAllEmailContacts() {
      this.axios.post('/email/findAllEmailContacts').then(response => {
        this.emailContacts = response.data
      }).catch(
        (resp) => {
          this.$confirm('网络异常！')
        })
    },

    searchByMailTo() {
      if (this.inputEmailTo == '') {
        this.queryRecentContacts()
      } else {
        this.axios.post('/email/findByMailTo/' + this.inputEmailTo).then(res => {
          this.recentContacts = res.data
        })
      }
    },

    //选择功能
    checkClick(tab, event) {
      this.activeName = tab.name
      if (tab.name == 'first') {
        this.bbb = true
      } else if (tab.name == 'second') {
        this.bbb = false
      }
    },

    sendMail() {
      this.$http.post('/email/send', this.form, { timeout: 1000 * 90 }).then(response => {

        this.loadUser()
        if (response.msg == '200') {
          this.$message({
            message: response.data,
            type: 'success'
          })
        }
      }).catch(error => {
        this.$message({
          message: '发送失败',
          type: 'error'
        })
      })
    },
    loadUser() {
      this.axios.get('/user/info').then(
        (resp) => {
          this.ruleForm = resp.data
          //alert("resp.data.realName"+resp.data.password)
        }
      ).catch(
        (resp) => {
          this.$confirm('网络异常！')
        }
      )
    },
    /*上传*/
    submitUpload() {
      this.$refs.upload.submit()

    },
    handleRemove(file, fileList) {
      console.log('========================')
      console.log(file, fileList)
      console.log('========================' + file.response.data)
    },
    handlePreview(file) {
      console.log('file=' + file)
    },

    //可以获取到上传文件的路径
    handleAvatarSuccess(res, file) {
      console.log('res=' + res)
      console.log('file=' + file)
      this.form.mailAttachment = res.data
      this.form.mailAddress = res[0].toString()
      console.log('this.form.mailAddress=' + this.form.mailAddress)
    },

    //查询最近发送的邮件信息
    queryRecentContacts() {
      this.axios.get('/email/findAll').then(
        (resp) => {
          this.recentContacts = resp.data
          this.recentContactsLength = resp.data.length
          console.log('resp.data=' + this.recentContacts)
        }).catch(
        (resp) => {
          this.$confirm('网络异常！')
        }
      )
    },
    //查看当前行的信息
    handleClick(row) {
      this.form.id=row.id
      this.lookForm.mailTo = row.mailTo
      this.lookForm.mailCc = row.mailCc
      this.lookForm.mailSubject = row.mailSubject
      this.lookForm.mailText = row.mailText
      this.lookForm.mailAddress = row.mailAddress
      console.log("this.form.id="+this.form.id)
      this.dialogFormVisible = true
    },
    resetEmailContactsForm() {
      this.emailContacts = {}
    }

  }

}
</script>

<style>
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}

.box-card {
  width: 480px;
}

.el-tooltip__popper {

  max-width: 800px;

}
</style>
